<template>
  <div>
    <login-top middleTop="注册Bilibili">
      <div slot="gopush" style="font-size:3.611vw" @click="$router.push('/login')">去登录</div>
    </login-top>

    <login-input
      @inputValue="content => (userList.name = content)"
      lable="姓名"
      placeholder="请输入姓名"
      rule="^.{6,16}$"
      style="margin:4.167vw 0"
    ></login-input>
    <login-input
      @inputValue="content => (userList.username = content)"
      lable="账号"
      placeholder="请输入账号"
      rule="^.{6,16}$"
    ></login-input>
    <login-input
      @inputValue="content => (userList.password = content)"
      lable="密码"
      placeholder="请输入密码"
      rule="^.{6,16}$"
      type="password"
    ></login-input>

    <login-btn btntext="注册" @handleInput="handleInput"></login-btn>
  </div>
</template>

<script>
import LoginTop from '@/components/common/LoginTop'
import LoginInput from '@/components/common/LoginInput'
import LoginBtn from '@/components/common/LoginBtn'

export default {
  data() {
    return {
      userList: {
        name: '',
        username: '',
        password: '',
      },
    }
  },
  created() {},
  methods: {
    async handleInput() {
      let reg = /^.{6,16}$/
      if (reg.test(this.userList.name) && reg.test(this.userList.username) && reg.test(this.userList.password)) {
        // console.log('ok')
        const res = await this.$axios.post('/register', this.userList)
        // console.log(res)
        if (res.data.code != 200) {
          return this.$toast.fail(res.data.msg)
        }
        this.$toast.success(res.data.msg)
        this.$router.push('/login')
      } else {
        this.$toast.fail('格式不正确，请重新输入')
      }
    },
  },
  components: {
    LoginTop,
    LoginInput,
    LoginBtn,
  },
}
</script>

<style lang="stylus" scoped></style>
